<template>
  <div class="header">
    <span class="dingwei">
      <span>定位</span>
      <i class="iconfont icon-xiala-01" slot="icon" style="font-size: 12px"></i>
    </span>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/bc39fda1f775b9837505e706f679decc.jpg?x-oss-process=image/quality,Q_70"
          alt=""
          class="img"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/b746d2482e9616263f86e40a378238d0.jpg?x-oss-process=image/quality,Q_70"
          alt=""
          class="img"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/111ecbab755c8a8610a9096596f9b8bb.jpg?x-oss-process=image/quality,Q_70"
          alt=""
          class="img"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单一 -->
    <div :class="{headers:sticky}">
    <div class="header-title" v-show="sticky">
      <div class="side">
        <span class="font"
          >定位
          <span
            ><img
              class="image"
              src=""
              alt="" /></span
        ></span>
      </div>
      <div class="header-title-item">电影</div>
      <div class="side"></div>
    </div>
    <!-- 菜单二 -->
    <van-tabs
      v-model="active"
      line-width="55px"
      line-height="2px"
      color="#ff5f16"
      title-active-color="#ff5f16"
      class="vantabs"
    >
      <van-tab replace to="/films/nowPlaying" title="正在热映"></van-tab>
      <van-tab replace to="/films/comingSoon" title="即将上映"></van-tab>
    </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Swipe , SwipeItem } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      active: 0,
      sticky: false,
    };
  },
  created() {
    const path = this.$route.path;
    if (path === "/films/comingSoon") {
      this.active = 1;
    }
  },
  mounted() {
    window.addEventListener("scroll", () => {
      const scrollTop = document.documentElement.scrollTop;
      if (scrollTop >= 230) {
        this.sticky = true;
      } else {
        this.sticky = false;
      }
    });
  },
};
</script>

<style lang="scss">
.headers {
   position: fixed;
    z-index: 990;
    width: 100%;
    top: 0px;
    background-color: #fff;
  .header-title {
   
    height: 44px;
    display: flex;
    border-bottom: 1px solid #eee;
    .side {
      width: 15%;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: 15px;
      .image {
        width: 6px;
        vertical-align: middle;
      }
    }
    .header-title-item {
      width: 70%;
      font-size: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>